<template>
    <div class="wrapper">
        <!-- 如果是老用户走这里 -->
        <div class="olderUser">
            <h3>提示：收书价格会不定期碎石场动态调整</h3>
            <div class="lists">
                <Books-example :result='result'></Books-example>
                <img src="../../../static/bookstomoney/delete.png" class='deletes' alt="">
            </div>
        </div>
        <div class="footers">
            <div class="leftDiv">
                <p class="total"><span>共5本，合计</span><span class="price">￥{{calculateTotal}}</span></p>
                <p class=" yunfei">回收金额达标，免运费<span>(￥45起免)</span></p>
            </div>
            <div class="rightDiv">
                <span class="noGoodsIn" @click="buildOrder">
                    去结算
                </span>
                <!-- <p>
                    去结算
                </p> -->
            </div>
        </div>
    </div>
</template>
<script>
import BooksExample from '../../components/booksExample/booksExample'
export default {
    data() {
        return {
            isNewUser: false,
            result: {},
            totalPrice: 35,
            currentPrice: ''
        }
    },
    components: {
        BooksExample
    },
    computed: {
        calculateTotal() {
            return this.result.bookPrice
        }
    },
    mounted() {
        this.result = wx.getStorageSync('bookInfo')
    },
    methods: {
        buildOrder() {
            wx.navigateTo({
                url: '../writesellbookinfo/main'
            })
        },
        scale() {
            wx.scanCode({
                onlyFromCamera: true,
                success(res) {
                    console.log(res)
                }
            })
        },
        onChange(detail) {
            console.log(detail)
        }
    }
}
</script>
<style lang="scss" scoped>
.footers {
    height: 100rpx;
    position: fixed;
    width: 100%;
    padding: 0 18rpx;
    box-sizing: border-box;
    left: 0;
    bottom: 0;
    border-top: 1px solid #d9d9d9;
    display: flex;
    justify-content: space-between;
    .leftDiv {
        margin-top: 14rpx;
        .total {
            color: #2b2b2b;
            font-size: 26rpx;
            .price {
                color: #c85051;
            }
        }
        .yunfei {
            font-size: 10px;
            color: #999;
            margin-top: 3px;
        }
        .lables {
            font-size: 22rpx;
            color: #666;
        }
    }
    .rightDiv {
        span {
            width: 166rpx;
            height: 72rpx;
            display: block;
            line-height: 72rpx;
            text-align: center;
            color: #fff;
            background: #c78550;
            border-radius: 5px;
            margin-top: 14rpx;
        }
    }
}
.wrapper {
    padding: 0 18rpx;
}
.lists {
    padding-top: 30rpx;
    border-bottom: 1px solid #d9d9d9;
    overflow: hidden;
    position: relative;
    .deletes {
        position: absolute;
        width: 28rpx;
        height: 30rpx;
        right: 18rpx;
        top: 50%;
        transform: translateY(-50%);
    }
    .opetionBtn {
        float: left;
    }
    ._van-checkbox {
        float: left;
        height: 124rpx;
        line-height: 124rpx;
    }
}
.scan {
    height: 100rpx;
    width: 65%;
    margin-left: 142rpx;

    margin-bottom: 60rpx;
    img {
        width: 88rpx;
        height: 88rpx;
        float: left;
        margin-right: 62rpx;
        box-sizing: border-box;
    }
    .desc {
        float: left;
        .step1 {
            color: #c78550;
            font-size: 36rpx;
            font-weight: bolder;
        }
        .titles {
            color: #2b2b2b;
            font-size: 28rpx;
        }
    }
}
.rule {
    width: 50%;
    text-align: center;
    height: 40rpx;
    margin: 0 auto;
    line-height: 40rpx;
    color: #2b2b2b;
    font-size: 28rpx;
    .click {
        color: #c78550;
        text-decoration: underline;
    }
}
.btns {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    bottom: 130rpx;

    span {
        font-size: 32rpx;
        color: #c78550;
        display: inline-block;
        width: 302rpx;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        border-radius: 10px;
        &:nth-child(1) {
            background: #c78550;
            color: #fff;
        }
        &:nth-child(2) {
            border: 1px solid #c78550;
            color: #c78550;
            height: 70rpx;
            width: 300rpx;
        }
    }
}
.olderUser {
    h3 {
        color: #c85051;
        font-size: 22rpx;
        width: 100%;
        text-align: center;
        height: 60rpx;
        line-height: 60rpx;
    }
}
</style>


